<template>
  <div class="source-drawer">
    <el-drawer
      ref="drawer"
      :visible="visible"
      @update:visible='cancel'
      :with-header="false"
      direction="rtl"
      size="40%"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form
          ref="branchForm"
          :model="branchForm"
          :rules="rules"
          label-width="100px"
        >
          <el-row>
            <el-col :span="18">
              <el-form-item label="节点名称" prop="name">
                <el-input v-model="branchForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider></el-divider>
          <el-row
            v-for="(branch, index) in branchForm.branchList"
            :key="branch.id"
            :gutter="10"
            class="margin_b_24"
          >
            <el-col :span="14">
              <el-form-item
                label="子节点名称"
                :prop="'branchList.' + index + '.date'"
                :rules="branchGroupRules.branchGroupDate"
              >
                <el-date-picker
                  v-model="branch.date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间"
                  @change="
                    val => {
                      dateChange(val, index);
                    }
                  "
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-input v-model="branch.name" clearable=""></el-input>
            </el-col>
            <el-col :span="4">
              <el-button
                v-show="branchForm.branchList.length > 2"
                type="primary"
                @click="deleteBranch(index)"
              >
                删除分支
              </el-button>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button
                v-show="branchForm.branchList.length < 10"
                type="primary"
                class="add_branch"
                @click="addBranch()"
              >
                添加分支
              </el-button>
            </el-col>
          </el-row>
          <div class="demo-drawer__footer">
            <div class="demo-drawer__footer">
              <el-row type="flex" justify="center">
                <el-col :span="4">
                  <el-button @click="cancel">取 消</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" @click="save">确 定</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { commonMixin } from "./common-mixin";
import { branchMixin } from "./branch-mixin";
export default {
  mixins: [commonMixin, branchMixin],
  data() {
    return {
      branchGroupRules: {
        branchGroupDate: [
          { required: true, message: "请选择日期时间", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    dateChange(val, index) {
      this.$set(this.branchForm.branchList[index], "name", val);
    }
  }
};
</script>
<style lang="scss" scoped>
.margin_b_24 {
  margin-bottom: 24px;
}
.add_branch {
  margin: 24px 0;
}
::v-deep {
  .el-date-editor {
    width: 100%;
  }
  .el-drawer__body {
    overflow: scroll;
  }
  .el-divider--horizontal {
    margin: 0 0 24px;
  }
  .el-drawer__header {
    border-top: 1px solid #dce3e8;
    border-bottom: 1px solid #dce3e8;
    background: #f1f3f4;
    padding: 5px 10px;
    margin-bottom: 1rem;
    font-size: 18px;
  }
  .el-drawer {
    border-left: 1px solid rgb(220, 227, 232);
    background-color: rgb(251, 251, 251);
  }
  .demo-drawer__content {
    padding: 20px;
  }
}
</style>
